<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/vant.css">
    <style>

    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="shangpingxiangqing  store-detail">
            <header>
                <div class="flex-x-s f7-header">
                    <div class="title">
                        商品详情
                    </div>

                </div>
            </header>


            <div class="pt">
                <div class="openapp-link">
                    <img src="../image/share/openapp.png" alt="">
                </div>
                <div class="main store goods-detail">
                    <van-swipe class="my-swipe preview-img" indicator-color="3F8CEC" autoplay="3000">
                        <van-swipe-item v-for="banner in 3">
                            <img src="../image/default/item_img.png" alt="">
                        </van-swipe-item>
                    </van-swipe>
                    <div class="detail-container">
                        <div class="ask-rent">
                            <div class="rent-name">{{detailData.title}}</div>
                            <div class="parts-price">
                                <div class="unit-price">¥</div>
                                {{detailData.price}}
                            </div>
                            <div v-if="detailData.isSelf && detailData.shopName" class="rent-store">{{detailData.shopName}}</div>
                            <div class="rent-store">品牌保障</div>
                        </div>
                        <div class="discount-container" v-if="detailData.promotions && detailData.promotions.length > 0">
                            <div class="discount-activity-container">
                                <div class="discount-activity">满1000减100</div>
                                <div class="discount-activity">满2000减300</div>
                                <div class="discount-activity">满1000减100</div>
                            </div>
                        </div>
                        <div class="thing-detail">
                            <div class="production-params">
                                <div class="params-info">设备详情</div>
                                <div class="param">
                                    <div class="param-items">
                                        <div class="type param-item param-key">机械类型</div>
                                        <div class="type-value param-item param-value">
                                            {{detailData.categoryName||detailData.typeName}}
                                        </div>
                                    </div>
                                    <div class="param-items">
                                        <div class="brand param-item param-key">机械品牌</div>
                                        <div class="brand-value param-item param-value">{{detailData.brandName}}</div>
                                    </div>
                                </div>
                                <div class="param">
                                    <div class="param-items">
                                        <div class="type param-item param-key">出厂日期</div>
                                        <div class="type-value param-item param-value">
                                            {{handleTimeYMD(detailData.deliveryDate)}}
                                        </div>
                                    </div>
                                    <div class="param-items">
                                        <div class="brand param-item param-key">机械型号</div>
                                        <div class="brand-value param-item param-value">{{detailData.modelName}}</div>
                                    </div>
                                </div>
                                <div class="param">
                                    <div class="param-items">
                                        <div class="type param-item param-key">工作时长</div>
                                        <div class="type-value param-item param-value">{{detailData.workHour}} 小时</div>
                                    </div>
                                    <div class="param-items">
                                        <div class="brand param-item param-key">所在地区</div>
                                        <div class="brand-value param-item param-value">
                                            {{detailData.addressName}},{{detailData.address}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="desc param-item">
                                <div class="desc-title">机械简介</div>
                                <div class="desc-content">{{detailData.intro}}</div>
                            </div>
                        </div>
                        <div class="about-recommend">
                            <div class="recommend-info">相关推荐</div>
                            <div class="recommend-container">
                                <div @click="gotoDetail(item)" class="horizental cangchu-item recommend-item" v-for="(item,index) in listRecommends" :key="index">
                                    <img src="../image/default/item_img.png" alt="" class="preview-img">
                                    <div class="center">
                                        <p class="recommend-name">{{item.title}}</p>
                                        <div class="info">
                                            <div class="info-item" v-show="item.addressName">{{item.addressName}}</div>
                                            <div class="info-item">{{handleTimeYMD(item.updateTime)}}</div>
                                        </div>
                                        <div class="price">
                                            <div class="unit-price">¥</div>
                                            {{item.price}}
                                        </div>
                                    </div>
                                    <div class="right">
                                        <div class="opt-btn">出租</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="share-qrcode">
                    <div class="qrcode-icon">
                        <img src="../image/share/share-qrcode.png" alt="">
                    </div>
                    <div class="share-link">铁蟹网</div>
                </div>
            </div>




        </div>
    </div>
    <script src="../script/flexible.js"></script>
    <script src="../script/vue.min.js"></script>
    <script src="../script/iconfont.js"></script>
    <script src="../script/vant.min.js"></script>
    <script src="../script/common.js"></script>
    <script>
        vm = new Vue({
            el: '.app',
            data() {
                var goods = {

                    url: "../image/detail/zhuangzaiji.jpeg",
                    shareContent: "",
                    reportContent: "",
                    isCollect: "",
                }
                return {
                    value: undefined,
                    onlineBuy: false,
                    isShowReportDialog: false,
                    isShowShareDialog: false,
                    shareDialog: false,
                    detailItem: {
                        "id": "1358329754288226306",
                        "type": 0,
                        "title": "哦哦哦",
                        "imageUrl": "http://192.168.1.29:8888/group1/M00/00/04/wKgBHWAfoq2AJV_2AAFwj_EK5kY599_150x150.png",
                        "categoryName": "推土机",
                        "typeName": "推土机3类",
                        "modelName": "1006",
                        "brandName": "test",
                        "price": 1569,
                        "isSelf": false,
                        "oldYear": 0,
                        "location": {
                            "lat": 31.230416,
                            "lon": 121.473701
                        },
                        "addressName": null,
                        "status": 1,
                        "createTime": 1612635625000,
                        "updateTime": 1612635625000,
                        "countDistance": "36"
                    },
                    detailData: {},
                    detailOtherData: {
                        isCollect: false,
                        refreshTimes: 0
                    },
                    goods,
                    options: [{
                        name: '微信好友',
                        icon: '../image/circle/wechat.png',
                    }, {
                        name: '微信朋友圈',
                        icon: '../image/circle/Wechat_Moments.png'
                    }],
                    listRecommends: []
                }
            },
            created() {

            },
            mounted: function() {

                this.detailData = {
                    "id": "1358689143624884226",
                    "createTime": 1612771710000,
                    "updateTime": 1612771710000,
                    "banners": [{
                        "id": "1358689143658438658",
                        "type": 0,
                        "imageUrl": "http://192.168.1.29:8888/group1/M00/00/07/wKgBHWAg8WSAagLVAAHAtLQepcQ336_150x150.png",
                        "videoId": ""
                    }],
                    "type": 0,
                    "title": "你看看",
                    "categoryId": "2",
                    "categoryName": "推土机",
                    "typeId": "23",
                    "typeName": "推土机3类",
                    "modelId": "1354225802517975041",
                    "modelName": "1006",
                    "brandId": "1353956035223740417",
                    "brandName": "test",
                    "deliveryDate": 1293811200000,
                    "workHour": 56,
                    "price": 5566.000,
                    "inquiried": false,
                    "intro": "",
                    "oldYear": 0,
                    "oldDesc": null,
                    "recommended": false,
                    "newed": false,
                    "areaId": "16484",
                    "address": "福州路185号",
                    "addressName": "上海市公安局",
                    "location": "121.486745,31.234818",
                    "status": 1,
                    "isSelf": true,
                    "userId": "1",
                    "shopId": "1",
                    "contactTels": null,
                    "shopName": null,
                    "promotions": [],
                    "tags": [{
                        "id": "71",
                        "name": "大型设备 ",
                        "introduction": "",
                        "url": null
                    }, {
                        "id": "75",
                        "name": "罕见设备 ",
                        "introduction": "",
                        "url": null
                    }]
                }


                this.listRecommends = [{
                    "id": "1358329754288226306",
                    "type": 0,
                    "title": "哦哦哦",
                    "imageUrl": "http://192.168.1.29:8888/group1/M00/00/04/wKgBHWAfoq2AJV_2AAFwj_EK5kY599_150x150.png",
                    "categoryName": "推土机",
                    "typeName": "推土机3类",
                    "modelName": "1006",
                    "brandName": "test",
                    "price": 1569.0,
                    "isSelf": false,
                    "oldYear": 0,
                    "location": {
                        "lat": 31.230416,
                        "lon": 121.473701
                    },
                    "addressName": null,
                    "status": 1,
                    "createTime": 1612635625000,
                    "updateTime": 1612635625000
                }, {
                    "id": "1358601910855192577",
                    "type": 0,
                    "title": "在这",
                    "imageUrl": "http://192.168.1.29:8888/group1/M00/00/05/wKgBHWAgoAmAOywWAAsZFAApeDw742_150x150.png",
                    "categoryName": "推土机",
                    "typeName": "推土机3类",
                    "modelName": "1006",
                    "brandName": "test",
                    "price": 5.0,
                    "isSelf": false,
                    "oldYear": 0,
                    "location": {
                        "lat": 31.139541,
                        "lon": 121.43642
                    },
                    "addressName": null,
                    "status": 0,
                    "createTime": 1612700512000,
                    "updateTime": 1612700512000
                }, {
                    "id": "1358651799295283201",
                    "type": 0,
                    "title": "dhdhd",
                    "imageUrl": "http://192.168.1.29:8888/group1/M00/00/06/wKgBHWAgzpGAJRL0AABJaIqgVSI626_150x150.png",
                    "categoryName": "推土机",
                    "typeName": "推土机3类",
                    "modelName": "1006",
                    "brandName": null,
                    "price": 5888.0,
                    "isSelf": false,
                    "oldYear": 0,
                    "location": {
                        "lat": 31.230416,
                        "lon": 121.473701
                    },
                    "addressName": null,
                    "status": 0,
                    "createTime": 1612712406000,
                    "updateTime": 1612712406000
                }]
            },
            methods: {





            },
        })
    </script>
</body>

</html>
